<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
		
	</head>
	<body>
		
	<h1>1-Bootstrap 标签页（Tab）</h1>
	
	<script type="text/javascript">
			/* ===  获得tab的title和content并显示 === */
			$(function() {
				$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
					// 获取已激活的标签页的名称
					var activeTab = $(e.target).text();
					// 获取前一个激活的标签页的名称
					var previousTab = $(e.relatedTarget).text();
					$(".active-tab span").html(activeTab);
					$(".previous-tab span").html(previousTab);
				});
			});
			
		</script>
	
	<hr>
	<p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>
	<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
	<hr>
	
	<ul id="myTab" class="nav nav-tabs">
		<li class="active">
			<a href="#home" data-toggle="tab">W3Cschool Home</a>
		</li>
		<li>
			<a href="#ios" data-toggle="tab">iOS</a>
		</li>
		<li class="dropdown">
			<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
				Java <b class="caret"></b></a>
			<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
				<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
				<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
			</ul>
		</li>
	</ul>
	<div id="myTabContent" class="tab-content">
		<div class="tab-pane fade in active" id="home">
			<p>W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
		</div>
		<div class="tab-pane fade" id="ios">
			<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
		</div>
		<div class="tab-pane fade" id="jmeter">
			<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
		</div>
		<div class="tab-pane fade" id="ejb">
			<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
			</p>
		</div>
	</div>
	
	<h1>2-工具提示Tooltip插件</h1>
	<pre>
		两个属性配合使用:
		data-toggle="tooltip":该属性添加提示
		title="默认的 Tooltip"：要提示的内容
		
	</pre>
	
	<script>
		$(function(){
			/* ===== 要使用提示,必须使用该JS,因为提示属性不是纯CSS样式 
			 	如果不加该JS就不会出现BootStrap的提示样式,但是还会有提示
			 * */
			$(function() {
				$("[data-toggle='tooltip']").tooltip();
			});
		});
		
	</script>
	
	
	<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
	<h2>2.1-工具提示（Tooltip）插件 - 锚</h2> 这是一个
	
	<a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">
		默认的 Tooltip
	</a>.这是一个
	<a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">
		左侧的 Tooltip
	</a>. 这是一个
	<a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">
		顶部的 Tooltip
	</a>. 这是一个
	<a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">
		底部的 Tooltip
	</a>. 这是一个
	<a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">
		右侧的 Tooltip
	</a>
	
	<br>
	
	<h2>2.2-工具提示（Tooltip）插件 - 按钮</h2>
	
	<button type="button" class="btn btn-default" data-toggle="tooltip" title="默认的 Tooltip">
	   默认的 Tooltip
	</button>
	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">
	   左侧的 Tooltip
	</button>
	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">
	   顶部的 Tooltip
	</button>
	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">
	   底部的 Tooltip
	</button>
	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">
	   右侧的 Tooltip
	</button>
	
	<h2>3.2-几种方法</h2>
	<pre>
		使用 JS 添加提示:
		
	</pre>
	<script>
		$(function(){
			/* ======= 手动添加提示样式的 JS 代码 ====== */
			$(function() {
				$('.tooltip-show').tooltip('show');
			});
			$(function() {
				$('.tooltip-hide').tooltip('hide');
			});
			$(function() {
				$('.tooltip-destroy').tooltip('destroy');
			});
			$(function() {
				$('.tooltip-toggle').tooltip('toggle');
			});
			$(function() {
				$(".tooltip-options a").tooltip({
					html: true
				});
			});
		});
	</script>
	<div style="padding: 100px 100px 10px;">
		这是一个
		<a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show
		</a>. 这是一个
		<a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide
		</a>. 这是一个
		<a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy
		</a>. 这是一个
		<a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle
		</a>.
		<p class="tooltip-options">
			这是一个
			<a href="#" data-toggle="tooltip" title="<h2>'am Header2
	         </h2>">Tooltip 方法 options
			</a>.
		</p>
	<div>

	<h2>3.3-事件</h2>
	
	<h4>工具提示（Tooltip）插件 - 锚</h4> 这是一个
	<a href="#" class="tooltip-show" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip
	</a>.
	
	<script>
		
		$(function() {
			$('.tooltip-show').tooltip('show');
		});
		
		//当调用 show 实例方法时立即触发该事件。
		$(function() {
			$('.tooltip-show').on('show.bs.tooltip', function() {
				alert("Alert message on show");
			})
		});
		
		//shown.bs.tooltip : 当工具提示对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
		$(function() {
			$('.tooltip-show').on('shown.bs.tooltip', function() {
				//...
			})
		});
		
		//hide.bs.tooltip : 当调用 hide 实例方法时立即触发该事件。
		$(function() {
			$('.tooltip-show').on('hide.bs.tooltip', function() {
				//...
			})
		});
		
		//hidden.bs.tooltip : 当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。
		$(function() {
			$('.tooltip-show').on('hidden.bs.tooltip', function() {
				//...
			})
		});
	</script>


	
	
	</body>
</html>
